<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
import {reactive} from 'vue'
const goBack = () => {
    router.push('/wode')
  Snackbar({
    // content: '返回',
    position: 'top'
  })
};
let data = reactive( [
    {
        bq:"家",
        idz:1,
        dizhi:"后乐园街-26号楼 洪德路后乐园街24-26号103房北边",
        xm:"曾宪煌",
        xb:"男",
        phone:"157****5059"
    },
    {
        bq:"",
        dizhi:"广州机电高级技工学校(海珠校区)4楼402",
        xm:"曾宪煌",
        xb:"男",
        phone:"157****5059"
    },
    {
        bq:"公司",
        idz:2,
        dizhi:"星河国际写字楼22楼",
        xm:"曾宪煌",
        xb:"男",
        phone:"157****5059"
    },
    {
        bq:"",
        dizhi:"红苗小区-35栋-4单元红苗小区35栋，四单元402",
        xm:"曾宪煌",
        xb:"男",
        phone:"157****5059"
    },
    {
        bq:"",
        dizhi:"鸿翔驾校培训基地",
        xm:"曾宪煌",
        xb:"男",
        phone:15779025059
    }
]);
</script>
<template>
<var-app-bar title="我的收货地址" title-position="center" text-color="black" color="#fff" style="margin-bottom:10px;font-weight: bold;">
    <template #left>
      <var-button
        round
        text
        color="transparent"
        text-color="black"
        @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
    <div style="width:96%;margin-left:2%;float:left;">
        <li v-for="item in data" style="border-bottom: 1px solid #eeeeee;">
            <div style="float:left;width:94%;padding-bottom: 10px;padding-top:10px;">
                <div style="font-size: 18px;font-weight: bold;float:left;width:100%;">
                    <span style="width:40px;background:#fef4d7;color:#fec237;float:left;text-align: center;font-size: 14px;margin-rigth
                    5px;" v-if="item.idz==1">{{item.bq}}</span>
                    <span style="width:40px;float:left;text-align: center;font-size: 14px;background: #e0eefa;color: #7fb0f4;margin-right: 5px;" v-if="item.idz==2">{{item.bq}}</span>
                    {{item.dizhi}}
                </div>
                <div style="font-size:12px;color:#c8c8c8;margin-top: 10px;float:left;width:100%;">{{item.xm}}<span style="margin-left:10px;">{{item.xb}}</span><span style="margin-left:20px;">{{item.phone}}</span></div>
            </div>
            <var-icon name="checkbox-marked-outline" style="float:right;transform:translate(0%,150%);font-size: 20px;color:#aeaeae;"/>
        </li>
    <!-- <li>slnglnslgn<var-icon name="checkbox-marked-outline" style="float:right;"/></li> -->
    <!-- <li>
        <span style="float:right;"></span>
        <var-icon name="checkbox-marked-outline" style="float:right;"/>
    </li> -->
        <!-- <var-row>
            <var-col :span="22">
            slnglasglknsl
            </var-col>
            <var-col :span="1">
            <var-icon name="checkbox-marked-outline" />
            </var-col>
        </var-row> -->
    </div>
    <div style="border-top:1px solid #eeeeee;width:100%;text-align: center;;float: left;margin-top: 20px;position: fixed;bottom: 0;z-index: 2;background: #fff;">
        <div style="border-bottom:2px solid #c7c7c7;width: 32%;margin:20px auto;padding-bottom: 10px;"><var-icon name="plus-circle-outline" color="#fde39a" /><span style="margin-left:5px;font-size: 14px;">新增收货地址</span></div>
    </div>
</template>
<style lang="scss" scoped>
li{
    list-style: none;
    width:100%;
    float:left;
    border-bottom:1px solid #999;
}
.var-elevation--3{
  box-shadow: none !important;
}
</style>